<template>
<!--
<el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="16">
 
 <form method="POST" enctype="multipart/form-data" action="http://localhost:8081/messages/saveMessage">

	<p>uid<input type="text" name="commonMessage.uid" /></p>
	<p>poolid<input type="text" name="commonMessage.poolid" /></p>
	<p>text<input type="text" name="commonMessage.text" /></p>
  <p>uid<input type="text" name="uid" /></p>
	
  <p>文件1<input type="file" name="file" /></p>
  <p>文件2<input type="file" name="file" /></p>
  <p><input type="submit" value="上传" /></p>
  
</form>
  <div>文件<input type="file" multiple accept="image/*" @change="onChange($event)"  /></div>

<el-button @click="createmsg()">asd</el-button>
  </el-col>
</el-row>
-->
<div class="formmsg">
<el-form id="tf"  method="POST" enctype="multipart/form-data" action="http://localhost:8081/messages/saveMessage">

	<p><input type="hidden" name="commonMessage.uid" id="uid1"/></p>
	<p><input type="hidden" name="commonMessage.poolid" id="pid"/></p>
	<p><input type="hidden" name="uid" id="uid2"/></p>

    <el-form-item label="请编辑消息">
    <el-input type="textarea" class="mytext" name="commonMessage.text" ></el-input>
  </el-form-item>
  <!--<p>text<input type="text" name="commonMessage.text" /></p>-->
	<p>请选择上传图片(*至少一个)&nbsp;</p>
  <p><input type="file" name="file" accept="image/*" multiple="multiple"/></p>

  
  <p>
  <el-button type="success" @click="upload()" value="">发布消息</el-button>
  <el-button type="success" @click="open3()">返回池子</el-button>
  </p>

  
</el-form>
</div>
</template>

<script>
import VueRouter from 'vue-router'
import axios from 'axios'
import resource from 'vue-resource'
import store from './vuex/store'
import Qs from 'qs'
import jQuery from 'jquery'


const myApi = axios.create({
  baseURL: 'http://localhost:8081/',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    //'Content-Type': 'application/json',
    'Content-Type':' application/x-www-form-urlencoded'
  }
});

export default {
  data(){
    return{
      form: {
          desc: ''
        },
        uid:1,
      text:'',
      file: [],
      };
    },
  methods:{
    open3(){
        this.$store.dispatch('setnew' , 1 );
        this.$router.push('/pool');
      },
    upload(){
      var thisVue = this;
              document.getElementById("uid1").value=this.$store.state.userinfo.uid;
              document.getElementById("uid2").value=this.$store.state.userinfo.uid;
              document.getElementById("pid").value=this.$store.state.pool.poolid;
              console.log('create_id');
              console.log(this.$store.state.pool.poolid);
              var form = new FormData(document.getElementById("tf"));
//             var req = new XMLHttpRequest();
//             req.open("post", "${pageContext.request.contextPath}/public/testupload", false);
//             req.send(form);
            jQuery.ajax({
               
                url:"http://localhost:8081/messages/saveMessage",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
                    console.log("over..");
                    console.log(data);
                    thisVue.$router.push('/pool');
                },
                error:function(e){
                    alert("请至少上传一个图片！！");
                }
            });        
    },
    createmsg(){
    //  var data = Qs.stringify({
    //    'commonMessage.poolid' : 1,
    //     'commonMessage.text' : '1',
    //     'commonMessage.uid' : 1,
    //     uid : 1});
    
    var data =new URLSearchParams();
    data.append('poolid','1');
    data.append('text','1');
    data.append('uid','1');
    data.append('file',this.file);
     
    myApi.post('/messages/testMsg',data).then((response)=>{
     //alert(response);
     console.log(response);
    }).then(function (response) {
     })

    },
    jump(){
      this.$router.push('/');
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      onChange(event) {
      this.file = event.target.files;
      console.log(this.file);
    },
  },
  created: function() {

  }
}
</script>

<style>
  .texta{
    width:100%;
    height:100%;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.formmsg{
  width: 60%;   
  height: 60%;  
  min-width: 200px;  
  max-width: 600px;
  padding: 40px;  
  margin-left: auto; 
  margin-right: auto;
}
.mytext{
  width: 100%;   
  height: 100%;  
}

</style>
